<template>
    <div class="container">
        <div id="map"></div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, markRaw } from "vue"
import mapboxgl, { Map } from "mapbox-gl"
import syncMaps from "@mapbox/mapbox-gl-sync-move"

let map = markRaw<Map>({})
onMounted(() => {
    init_map()
    //syncMaps(map, map2)
})
function init_map() {
    map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        projection: 'globe',
        zoom: 1,
        center: [30, 15]
    })
    map.on('load', () => {
        map.setFog({})
        fetch("https://geojson.cn/api/data/510000.json").then(res => res.json()).then(res => {
            map.addSource("all_province", {
                type: "geojson",
                data: res
            })
            map.addLayer({
                id: "mask",
                type: "fill",
                source: {
                    type: "geojson",
                    data: {
                        type: "Feature",
                        geometry: {
                            type: "Polygon",
                            coordinates: [
                                res.features[0].geometry.coordinates[0][0]
                            ]
                        }
                    }
                },
                paint: {
                    "fill-color": "rgba(0,0,0,0.5)"
                }
            })
            map.flyTo({
                center: res.propertity.center,
                zoom: 5
            })
        })
        add_marker()
    })
}
function add_marker() {
    const popup = new mapboxgl.Popup().setText("测试测试文本")
    new mapboxgl.Marker().setLngLat([104.066301, 30.572961]).setPopup(popup).addTo(map)
}
</script>

<style lang="scss" scoped>
.container {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

#map {
    position: absolute;
    inset: 0;
}
</style>